<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head{
            width: 400px;
            height: 100px;
            margin: 40px;
            text-align: center;
            border: 1px solid #00b050;
        }
        .head p{
            margin-top: 10px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="box">
        <parent></parent>
    </div>
    <template id="parentT">
        <div class="head">
            <p>{{msg}}</p>
            <!-- 调用子组件 处理函数不要加() -->
            <child @change="getCmsg"></child>
            <!-- 接收到的子组件值为：{{msg}} -->
        </div>
    </template>
    <template id="childT">
        <div class="head1">
            <button @click="fn">点击计数</button>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {},
            components: {
                parent: {
                    template: "#parentT",
                    data() {
                        return {
                            msg: 0
                        }
                    },
                    methods:{
                        // 接收监听 (参数里就是触发监听emit传入的值)
                        getCmsg(incmsg){
                            console.log(incmsg);
                            this.msg=incmsg;
                        }
                    },
                    components: {
                        child: {
                            template: "#childT",
                            data() {
                                return {
                                    cmsg: 0
                                }
                            },
                            methods: {
                                fn() {
                                    // 准备传递数据
                                    this.cmsg++;
                                    console.log(this);
                                    this.$emit("change", this.cmsg)
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>